<template>
  <div class="font-bold text-2xl">
    <!-- 四舍五入后的值 -->
    {{ d.num.toFixed(0) }}
  </div>
</template>

<script setup>
import gsap from 'gsap';
import { reactive, watch } from 'vue';



//总数值
const d = reactive({
  num: 0
})
//对外暴露的属性值
const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
})
const  animateToValue = ()=>{
  gsap.to(d, {
    duration: 1,
    num: props.value
  })
}
animateToValue()

//监听属性
watch(() => props.value, () => {
  animateToValue()
})


</script>

<style scoped>

</style>